<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="" alt="" id="imgAvatar" />
    <input type="file" id="avatar" />
    <button type="button">上传</button>

    <script>
      const button = document.querySelector("button");
      const imgEl = document.querySelector("#imgAvatar");

      async function upload() {
        const inp = document.getElementById("avatar");
        const formData = new FormData(); // 根据请求体
        formData.append("imagefile", inp.files[0]);
        const url = "http://101.132.72.36:5100/api/upload";
        const resp = await fetch(url, {
          method: "post",
          body: formData, // 自动修改请求头中的Content-Type类型
        });
        const result = await resp.json();
        return result;
      }

      button.onclick = async function () {
        const { path } = await upload();
        imgEl.src = path;
      };
    </script>
  </body>
</html>
